<template>
  <div id="billing_list">

    <header-page />

    <div id="billing_list_wrapper">

      <h1><i class="el-icon-s-order"></i> 請求一覧</h1>

      <el-table
        :data="billing_list"
        stripe
      >
        <el-table-column
          prop="num"
          label="請求番号"
          header-align="center"
          align="right"
        >
        </el-table-column>
        <el-table-column
          prop="term"
          label="請求対象期間"
          header-align="center"
          align="left"
        >
        </el-table-column>
        <el-table-column
          prop="amount"
          label="請求金額"
          header-align="center"
          align="right"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="ステータス"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="period"
          label="請求日"
          header-align="center"
          align="left"
        >
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="current_page"
        :page-sizes="page_sizes"
        :page-size.sync="page_size"
        layout="sizes, prev, pager, next"
        :total="page_total"
        background
      >
      </el-pagination>
    </div>

  </div>
</template>

<script>

import HeaderPage from './header'

export default {
  name: 'billing_list',
  components: {
    HeaderPage
  },
  data () {
    return {
      billing_list: [],

      /* https://element.eleme.io/#/en-US/component/pagination */
      page_sizes: [20, 50, 100],
      page_size: (this.$route.query.limit === undefined) ? 20 : parseInt(this.$route.query.limit, 10),
      current_page: (this.$route.query.offset === undefined) ? 1 : parseInt(this.$route.query.offset / this.$route.query.limit + 1, 10),
      page_total: 1000
    }
  },
  methods: {
    get_billing_list () {
      return [
        {num: '00000010', term: '2019/03/01～2019/03/31', amount: '￥123,456', status: '請求', period: '2019/04/10'},
        {num: '00000009', term: '2019/03/01～2019/03/31', amount: '￥123,456', status: '支払済', period: '2019/04/10'},
        {num: '00000008', term: '2019/03/01～2019/03/31', amount: '￥123,456', status: '支払済', period: '2019/04/10'},
        {num: '00000007', term: '2019/03/01～2019/03/31', amount: '￥123,456', status: '支払済', period: '2019/04/10'},
        {num: '00000006', term: '2019/03/01～2019/03/31', amount: '￥123,456', status: '支払済', period: '2019/04/10'},
        {num: '00000005', term: '2019/03/01～2019/03/31', amount: '￥123,456', status: '支払済', period: '2019/04/10'},
        {num: '00000004', term: '2019/03/01～2019/03/31', amount: '￥123,456', status: '支払済', period: '2019/04/10'},
        {num: '00000003', term: '2019/03/01～2019/03/31', amount: '￥123,456', status: '支払済', period: '2019/04/10'},
        {num: '00000002', term: '2019/03/01～2019/03/31', amount: '￥123,456', status: '支払済', period: '2019/04/10'},
        {num: '00000001', term: '2019/03/01～2019/03/31', amount: '￥123,456', status: '支払済', period: '2019/04/10'}
      ]
    },
    handleSizeChange (val) {
      let offset = (this.$route.query.offset === undefined) ? 0 : this.$route.query.offset
      let limit = val
      this.current_page = parseInt(offset / limit + 1, 10)
      this.$router.push({
        name: 'billing_list',
        query: {
          offset: offset,
          limit: limit
        }
      })
    },
    handleCurrentChange (val) {
      this.$router.push({
        name: 'billing_list',
        query: {
          offset: (val - 1) * this.page_size,
          limit: this.page_size
        }
      })
    }
  },
  created () {
    this.billing_list = this.get_billing_list()
  }
}
</script>
<style>
  @import '../../static/css/global.css';
  @import '../../static/css/billing_list.css';
</style>
